<template>
	<view class="page">
		<!-- <view>行程</view> -->
		<view class="item-head">
			<view class="item-search-nav">
				<view class="item-search">
					<image src="../../static/seek.png"></image>
					<input v-model="ordernum" placeholder="请输入出发地或目的地" />
				</view>
				<view class="item-search-btn" @click="search">搜索</view>
			</view>
			<view class="item-head-nav-box">
				<view class="item-head-nav">
					<view @click="doSelectTab('')" :class="tab == '' ? 'have':''">全部</view>
					<view @click="doSelectTab(1)" :class="tab == 1 ? 'have' : ''">待付款</view>
					<view @click="doSelectTab(2)" :class="tab == 2 ? 'have':''">已付款</view>
					<view @click="doSelectTab(3)" :class="tab == 3 ? 'have':''">待出发</view>
					<view @click="doSelectTab(4)" :class="tab == 4 ? 'have':''">行驶中</view>
					<view @click="doSelectTab(5)" :class="tab == 5 ? 'have':''">已结束</view>
					<view @click="doSelectTab(6)" :class="tab == 6? 'have':''">退单中</view>
					<view @click="doSelectTab(7)" :class="tab == 7? 'have':''">已退单</view>
				</view>
			</view>
			
		</view>

		<view class="item-content" v-for="(item,index) of listData " :key="index">
			<view class="item-con-head" @click="gotoDetail(item.id)">
				<view class="item-con-head-left">
					<text>订单号：{{item.ordernum}}</text>
					<!-- <view class="">
						{{item.days}}
					</view> -->
				</view>
				<view class="item-con-head-status" v-if="item.status==0 ">
					待付款
				</view>
				<view class="item-con-head-status" v-if="item.status==1 ">

					<text v-if="item.owner_status == -1">已付款,未有车主接单</text>
					<text v-if="item.owner_status == 0">车主已接单</text>
					<text v-if="item.owner_status == 1">
						<text v-if="item.travel_status==0">待出发</text>
						<text v-if="item.travel_status==1">行驶中</text>
						<text v-if="item.travel_status==2">已结束</text>
					</text>
					<text class="item-con-head-status" v-if=" item.owner_status ==3 ">
						车主退单申请中
					</text>
					<text class="item-con-head-status" v-if=" item.owner_status ==4 ">
						车主退单退单驳回
					</text>
					<text class="item-con-head-status" v-if=" item.owner_status ==2 ">
						车主已退单
					</text>
					<!-- <text v-else> 已付款</text> -->
					<!-- <text v-if="owner_status == 2">,</text>
					<text v-if="owner_status == 3">,</text>
					<text v-if="owner_status == 4">,</text> -->
				</view>
				<view class="item-con-head-status" v-if="item.status==2 ">
					已取消
				</view>
				<view class="item-con-head-status" v-if=" item.status ==3 ">
					退单中
				</view>
				<view class="item-con-head-status" v-if=" item.status ==4 ">
					退单驳回
				</view>
				
			</view>
			<view class="item-con-time">			
				<view class="item-con-time-img">
					<image src="../../static/user/icon-time.png"></image>
					<view>{{item.star_time}}</view>
				</view>
				<!-- <view class="carClick">车主已查看<text>{{item.click}}</text>次</view> -->
				<view class="carClick">
					<view class="item-con-time-img item-con-time-img2">
						<text>车座: </text>
						<view> {{item.passenger}}</view>
					</view>
					<view class="item-con-time-img">
						<text>车主查看次数:</text>
						<view>{{item.click}}</view>
					</view>
				</view>
			</view>
			<view class="item-con-box" @click="gotoDetail(item.id)">
				<view class="item-con-begin">
					<view class="item-con-begin-address" v-if="listData.length != 0">
						<view class="dot dot-begin"></view>
						<view>{{item.star_address.b_name}}</view>						
					</view>
					<view class="item-con-begin-address" v-if="listData.length != 0">
						<view class="dot"></view>
						<view>{{item.end_address.d_name}}</view>						
					</view>
					<!-- <view class="item-con-begin-time">11:00</view> -->
				</view>
				<!-- <view class="item-con-hr">
					<view class="item-con-hr-box">
						<hr />
					</view>
					<view>
						<text>16 座</text>
						<text class="hx"> | </text>
						<text>{{item.passenger}} 人</text>
					</view>
				</view> -->
				<view class="item-con-begin">
					<!-- <view v-if="listData.length != 0">{{item.end_address.d_name}}</view> -->
					<!-- <view class="item-con-begin-time">17:00</view> -->
				</view>
			</view>
			
			<view class="item-bottom" v-if="item.status==1 && item.owner_status !=1 ">
				<view class="item-bottom-cancel" @click="cancelOrder(item.id)">取消订单</view>
				<view class="item-bottom-update" @click="updata('updata',item.id)">修改订单</view>
			</view>
			<view class="item-bottom" v-if="item.status==1 && item.owner_status ==1&& item.travel_status==0">
				<view class="item-bottom-cancel" @click="cancelOrder(item.id)">取消订单</view>
				<view class="item-bottom-update" @click="updata('updata',item.id)">修改订单</view>
			</view>
			<view class="item-bottom" v-if="item.status==0 ">
				<view class="item-bottom-cancel" v-if="item.status==0 " @click="delectOrder(item.id)">删除订单</view>
				<view class="item-bottom-update" @click="payment(item.id)">去付款</view>
			</view>
			<view class="item-bottom" v-if="item.status==1 && item.owner_status ==1 &&item.travel_status==1">	
				<view class="item-bottom-update" @click="updata('updata',item.id)">修改订单</view>
			</view>
			<view class="item-bottom" v-if="item.status==2 ">
				<view class="item-bottom-update" @click="gotoPage('/pagesUser/home/custom-car/custom-car')">再来一单</view>
			</view>
			<view class="item-bottom" v-if="item.status==3 ">
				<view class="item-bottom-update" @click="cancelReturn(item.id)">取消退单</view>
			</view>
		</view>
		<view class="yy" v-if="reasonShow" @click="closeReacon"></view>
		<view class="reason" v-if="reasonShow">
			<label>请输入取消订单原因</label>
			<textarea v-model="reasonCon" style="resize: none;" focus="" ></textarea>
			<view class="reason-form" @click="cancelOrder2">提交</view>
		</view>
		<view style="height: 130rpx;"></view>
		<view class="d-c-c p30" v-if="listData.length == 0">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">亲，暂无相关记录哦</text>
		</view>
		<view v-else v-show="isLoadMore">
			<uni-load-more :loadingType="loadding"></uni-load-more>
		</view>
		<view style="height: 130rpx;"></view>
		<!-- <footUser></footUser> -->
		<footTabber></footTabber>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				reasonShow:false,
				reasonCon:'',
				noClick:true,
				loadding: 0,
				status: '', //	接单状态
				owner_status: '', //接单状态
				travel_status: '', //出行状态 
				ordernum: '', //订单号
				tab: '',
				listData: [], //获取的订单
				status: 0, //订单的状态0：待出发；1：待付款
				star_add: '',
				orderAll: '',
				oadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				page: 1,
				pagesize: 10,
				timer:null,
			};
		},
		onLoad() {
			this.getNav();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.listData = [];
			this.getNav();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page += 1
				this.getNav();
			}
		},
		methods: {
			/* 取消退单 */
			cancelReturn(id) {
				let self = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否要取消此订单',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中'
							});
							self._post('order.CarOrder/cancel_chargeback', {
									id: id,
									type:1
								},
								function(res) {
									if (res.code == 1) {
										uni.showToast({
											title: '取消成功'
										});
										uni.navigateTo({
											url: '/pagesUser/journey/journey'
										});
									}
									uni.hideLoading();
								});
						}else if(res.cancel){
							return;
						}
					}
				})
				
			},
			/* 删除订单 */
			delectOrder(id) {
				let self = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否要删除此订单',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中'
							});
							self._post('order.CarOrder/del_order', {
									id: id
								},
								function(res) {
									if (res.code == 1) {
										uni.showToast({
											title: '删除成功'
										});
										uni.navigateTo({
											url: '/pagesUser/journey/journey'
										});
									}
									uni.hideLoading();
								});
						}else if(res.cancel){
							return;
						}
					}
				})
			
			},
			/* 修改需求 */
			updata(updata, id) {
				//console.log(id)
				uni.navigateTo({
					url: '/pagesUser/journey/updata/updata?select=1&&id=' + id + '&&type=' + updata
				});
			},
			/* 付款 */
			payment(id) {
				uni.navigateTo({
					url: '/pagesUser/paymentPage/paymentPage?select=1&&order_id=' + id
				})
			},
			closeReacon(){
				this.reasonShow=false
			},
			/* 取消订单 */
			cancelOrder(id){
				let self = this;
				
				console.log(id);
				uni.showModal({
					title:'温馨提示',
					content:'是否要取消此订单',
					success(res) {
						if(res.confirm){
							self.reasonShow=true
							self.order_id = id;
						}else{
							return;
						}
					}
				})
			},
			cancelOrder2(id){
				let self = this;
				if(self.reasonCon == ''){
					uni.showToast({
						title:'请输入取消原因',
						duration:2000,
						icon:'none'
					});
					return;
				}
				self._post('order.CarOrder/user_cancel',
				{
					reason:self.reasonCon,
					order_id:self.order_id
				},
				function(res){
					if(res.code ==1){
						uni.showToast({
							title:'您的申请已提交，等待后台审核。',
							duration:2000,
							icon:'none'
						});
						self.timer = setTimeout( () => {
						  self.getNav();
						}, 1000);
						if (self.timer) {
							clearTimeout(self.timer);
							self.timer = null;
						}
						self.reasonShow = false;
						//self.getNav();
					}
				})
			},
			// /* 取消订单 */
			// cancel(id) {
			// 	let self = this;
			// 	uni.showModal({
			// 		title: '温馨提示',
			// 		content: '是否要取消此订单',
			// 		success(res) {
			// 			if (res.confirm) {
			// 				uni.showLoading({
			// 					title: '取消'
			// 				});
			// 				self._post('order.CarOrder/user_cancel', {
			// 						order_id: id
			// 					},
			// 					function(res) {
			// 						if (res.data.id == id) {
			// 							uni.showToast({
			// 								title: '取消成功'
			// 							});
			// 							self.getNav();
			// 						}
			// 						uni.hideLoading();
			// 					});
			// 			} else if (res.cancel) {

			// 			}
			// 		}
			// 	})

			// },
			/* 详情 */
			gotoDetail(id) {
				//console.log(id)
				uni.navigateTo({
					url: '/pagesUser/journey/detail/detail?select=1&&id=' + id
				})
			},
			/* 搜索 */
			search() {
				if (this.ordernum == '') {
					uni.showModal({
						title: '请输入出发地或目的地'
					})
					return;
				}
				self.page = 1;
				self.listData = [];
				this.getNav();
			},
			/* 导航栏 */
			doSelectTab: function(tab) {
				let self = this;
				self.tab = tab;
				self.status = tab;
				self.page = 1;
				self.listData = [];
				self.getNav();
			},
			getNav() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._post('order.CarOrder/user_order', {
						//status: '',
						status_type: self.status,
						// owner_status: self.owner_status,
						// travel_status: self.travel_status,
						ordernum: self.ordernum,
						page: self.page,
						pageSize:self.pagesize
					},
					function(res) {
						//self.listData = res.data.list.data;
						//self.orderAll = self.listData.length

						if (res.data.list.data) {
							self.listData = self.listData.concat(res.data.list.data)
							if (res.data.list.data.length < self.pagesize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								self.isLoadMore = true
								self.loadding = 2
							} else {
								self.isLoadMore = false
							}
						} else {
							self.isLoadMore = true
							self.loadding = 2
						}
						//self.status = self.listData
						//console.log(self.listData);	
						//self.star_add = res.data.list.data.star_address
						//console.log(self.star_add)
						//self.loadding = true;
						uni.hideLoading();
					});
			},
			/*跳转页面*/
			gotoPage(path) {
				let self = this;
				if (path.startsWith('/')) {
					uni.navigateTo({
						url: path
					});
				} else {
					self[path]();
				}
			},
		},
	}
</script>

<style lang="scss">
	.page {
		padding-top: 100rpx;
	}

	.item-head {
		 width: 100%;
		// background-color: #0A98D5;
		 overflow: hidden;
		//position: fixed;
		// height: 3600rpx;
	}

	.item-search-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
	}

	.item-search {
		width: 86%;
		padding: 10rpx;
		display: flex;
		align-items: center;
		background-color: #f3f5ff;
		border-radius: 80rpx;
	}

	.item-search image {
		width: 36rpx;
		height: 36rpx;
	}

	.item-search input {
		margin-left: 16rpx;
	}

	.item-search-btn {
		color: #1546FA;
	}
	.item-head-nav-box{
		overflow: auto;
		margin-left: 12rpx;
	}
	.item-head-nav {
		margin-top: 20rpx;
		width: 120%;
		//width: 300rpx;
		text-align: center;
		//margin:  auto;
		//padding: 20rpx;
		display: flex;
		//justify-content: space-;
		//align-items: center;
		font-size: 30rpx;
		//background-color: #007AFF;
		overflow-x: auto;
	}

	.item-head-nav view {
		padding: 20rpx 10rpx;
		width: 90rpx;
		//background-color: #F4F4F4;
		//display: inline;
		//height: 60rpx;
		//text-align: center;
		overflow: auto;
		//background-color: #00B26A;
	}

	.have {
		font-size: 30rpx;
		color: #1546FA;
		border-bottom: 8rpx solid #0b77fa;
	}

	.item-content {
		//width: ;
		
	}

	.item-con-head {
		padding: 46rpx 0 30rpx;
		border-bottom: 2rpx solid #F4F4F4;
	}

	.item-con-head,
	.item-con-head-left {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}

	.item-con-head-left view {
		width: 80rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: #5864FD;
		color: #FFFFFF;
		border-radius: 20rpx;
		margin-left: 20rpx;
	}

	.item-con-head-status {
		color: #FF703A;
	}

	.item-con-time {
		margin: 10rpx 0;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.item-con-time-img{
		display: flex;
		align-items: center;
	}
	.item-con-time-img2{
		margin-right: 16rpx;
	}
	.item-con-time-img image{
		width: 26rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}
	.item-con-box {
		padding: 0 0rpx 30rpx;
		margin-top: 20rpx;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		//background-color: #007AFF;
	}

	.item-con-begin {
		
		font-size: 30rpx;
		font-weight: 600;
		
	}
	.item-con-begin-address{
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}
	
	.dot{
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		margin-right: 16rpx;
		background-color: #5E7FFF;
	}
	.dot-begin{
		background-color: #c2c2c2;
	}
	.dot-censer{
		
	}
	.item-con-hr {
		//background-color: #00B26A;
		text-align: center;
	}

	.item-con-hr hr {
		width: 100rpx;
		margin: 0rpx auto 6rpx;
		//margin-left: -20rpx;
		border-top: 1px dashed #707070;
	}

	// .item-con-time {
	// 	font-size: 28rpx;
	// 	font-weight: 500;
	// 	width: 40%;
	// 	margin: 0 46rpx;
	// }

	.item-con-begin-time {
		font-weight: 800;
		font-size: 32rpx;
		margin: 10rpx 0;
	}

	.hx {
		margin: 0 8rpx;
		color: #AAADB7;
	}

	.item-content {
		width: 88%;
		//height: 600rpx;
		margin: 40rpx auto 0;
		background-color: #FFFFFF;
		padding: 20rpx 20rpx 0;
		box-shadow: 0rpx 0rpx 20rpx 4rpx #e3e3e3;
	}

	.item-bottom {
		width: 100%;
		border-top: 1rpx solid #F1F1F3;
		display: flex;
		align-items: center;
		justify-content: space-around;
		// /padding: 30rpx 0 10rpx;
		color: #1546FA;
	}

	.item-bottom view {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		//background-color: #00B26A;
	}

	.item-bottom-update {
		border-left: 2rpx solid #F1F1F3;
	}
	.carClick{
		display: flex;
		align-items: center;
		//margin-top: -20rpx;
		//margin-bottom: 10rpx;
		//padding: 6rpx 0;
		//background-color: #007AFF;
		//margin: 6rpx 0;
	}
	.reason{
		position: fixed;
		bottom: 200rpx;
		width: 90%;
		left: 2%;
		//height: 360rpx;
		margin: 0 auto;
		padding: 20rpx;
		background-color: #FFFFFF;
		z-index: 999;
		border-radius: 20rpx;
	}
	.reason label{
		font-size: 30rpx;
		font-weight: 800;
		margin: 20rpx;
	}
	.reason textarea{
		padding: 20rpx;
		width: 90%;
		height: 300rpx;
		margin-top: 10rpx;
		border: 1rpx solid #F4F4F4;
	}
	.reason-form{
		margin: 30rpx 0 20rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1546FA;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
	}
	.yy{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #000000;
		opacity: 0.6;
	}
</style>
